<template>
  <div class="model-overview-container">
    <h2 class="page-title">模型概述</h2>
    
    <div class="model-description">
      <p>深度学习模型架构与特征分析</p>
    </div>

    <div class="model-cards-container">
      <!-- CNN 空间特征分析 -->
      <div class="model-card">
        <div class="card-header">
          <div class="model-icon">
            <el-icon><Connection /></el-icon>
          </div>
          <h3 class="model-title"><strong>CNN 空间特征分析</strong></h3>
        </div>
        
        <p class="model-desc">卷积神经网络模型专注于捕捉漏洞特征的空间相关性，通过多层卷积提取高维特征。</p>
        
        <div class="feature-list">
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><Histogram /></el-icon>
            </div>
            <span><strong>多层卷积特征提取</strong></span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><Position /></el-icon>
            </div>
            <span><strong>空间相关性分析</strong></span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <span><strong>深度特征学习</strong></span>
          </div>
        </div>
        
        <div class="model-image">
          <img src="../../assets/cnn-model.png" alt="CNN模型结构图" />
        </div>
      </div>

      <!-- LSTM 时序特征分析 -->
      <div class="model-card">
        <div class="card-header">
          <div class="model-icon">
            <el-icon><Timer /></el-icon>
          </div>
          <h3 class="model-title"><strong>LSTM 时序特征分析</strong></h3>
        </div>
        
        <p class="model-desc">长短期记忆网络擅长分析漏洞数据中的时序模式，有效预测攻击序列。</p>
        
        <div class="feature-list">
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><DCaret /></el-icon>
            </div>
            <span><strong>时序依赖建模</strong></span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><Timer /></el-icon>
            </div>
            <span><strong>长期记忆能力</strong></span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><Operation /></el-icon>
            </div>
            <span><strong>序列模式识别</strong></span>
          </div>
        </div>
        
        <div class="model-image">
          <img src="../../assets/lstm-model.png" alt="LSTM模型结构图" />
        </div>
      </div>

      <!-- CNN-LSTM 混合模型 -->
      <div class="model-card">
        <div class="card-header">
          <div class="model-icon">
            <el-icon><Share /></el-icon>
          </div>
          <h3 class="model-title"><strong>CNN-LSTM 混合模型</strong></h3>
        </div>
        
        <p class="model-desc">结合CNN空间特征提取和LSTM时序分析的优势，提供更全面的漏洞检测能力。</p>
        
        <div class="feature-list">
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><CopyDocument /></el-icon>
            </div>
            <span><strong>多维特征融合</strong></span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><Monitor /></el-icon>
            </div>
            <span><strong>端到端学习</strong></span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <span><strong>综合分析能力</strong></span>
          </div>
        </div>
        
        <div class="model-image">
          <img src="../../assets/hybrid-model.png" alt="混合模型结构图" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  Connection, 
  Timer, 
  Share, 
  Histogram, 
  Position, 
  TrendCharts, 
  DCaret, 
  Operation, 
  CopyDocument, 
  Monitor, 
  DataAnalysis 
} from '@element-plus/icons-vue'
</script>

<style scoped>
.model-overview-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 500;
  color: #333;
}

.model-description {
  margin-bottom: 30px;
  color: #606266;
}

.model-cards-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.model-card {
  flex: 1;
  width: calc(33.333% - 14px);
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.model-icon {
  width: 46px;
  height: 46px;
  border-radius: 4px;
  background-color: rgba(64, 158, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.model-icon .el-icon {
  font-size: 24px;
  color: #409EFF;
}

.model-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.model-desc {
  margin-bottom: 20px;
  line-height: 1.5;
  color: #606266;
  flex-grow: 0;
  min-height: 48px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  color: #606266;
  padding: 4px 0;
  font-size: 14px;
}

.feature-icon {
  width: 24px;
  display: inline-flex;
  justify-content: center;
  margin-right: 8px;
}

.feature-icon .el-icon {
  font-size: 16px;
  color: #409EFF;
}

.model-image {
  width: 100%;
  margin-top: auto;
}

.model-image img {
  width: 100%;
  border-radius: 8px;
  display: block;
  height: 160px;
  object-fit: contain;
  background-color: #fff;
}

@media screen and (max-width: 992px) {
  .model-cards-container {
    flex-direction: column;
  }
  
  .model-card {
    width: 100%;
  }
}
</style> 